<template>
	<div class="collection-container">
		<!-- 商品列表区域 -->
		<div v-if="mygamesList.length==0">
			<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
				description="暂时没有数据" />
		</div>
		<div v-for="(item, i) in mygamesList" :key="i" style="margin-top: 1rem;" v-else>
			<van-row type="flex" align="center">
				<van-col span="4">
					<!-- 中间商品图片 -->
					<van-image radius="20px" :src="APIDomainName + item.pic"></van-image>
				</van-col>
				<van-col span="14" offset="1" style="display: flex;justify-content: space-between;">
					<div>
						<div style="font-size: 22px;margin-bottom: 0.5rem;font-weight: 600;">{{ item.title }}</div>
						<div style="font-size: small;color: #888B90;">{{item.id}}万+人购买</div>
					</div>
				</van-col>
				<van-col span='5'>
					<van-button round
						style="background-color: rgba(1, 203, 226, 0.1); color: #01CBE2;width: 100%;font-weight: bold;font-size: 16px;border: 0;"
						@click="onDetail(item.id)">
						<div style="display: flex;align-items: center;">
							<div><img src="@/assets/discussion.png" style="width: 1.5rem"></img></div>
							<div>论坛</div>
						</div>
					</van-button>
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	import {
		getMygamesListAPI
	} from "@/api/cart.js";

	export default {
		data() {
			return {
				mygamesList: [],
			};
		},
		created() {
			this.getMygamesData();
		},
		methods: {
			getMygamesData() {
				this.mygamesList = []; //清空
				getMygamesListAPI().then(result => {
					console.log(result.data)
					this.mygamesList = result.data;
					
				}).catch(() => {});
			},
			onDetail(id) {
				this.$router.push({
					name: 'forumDetail',
					params: {
						id
					},
				});
			}
		}
	};
</script>

<style>
	.collection-container {
		padding:0 20px 20px 20px;
	}
	.custom-image .van-empty__image {
		width: 100px;
		height: 100px;
		margin-top: 5rem;
	}
</style>
